<template>
  <div class="Xiala-box">
    <el-select
      style="width: 100%; height: 100%"
      v-model="oNitem"
      filterable
      placeholder="请选择"
      @change="addOnchange"
    >
      <el-option
        v-for="item in xialaList"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      />
    </el-select>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
onMounted(() => {
  xialaList.value = props.xialaList
})
const props = defineProps({
  xialaList: {
    type: Array
  }
})
const emit = defineEmits(["belowEmits"])
const addOnchange = (e) => {
  console.log(e)
  emit("belowEmits", e)
}
const xialaList = ref([])
const oNitem = ref("")
</script>
<style scoped lang="less">
.Xiala-box {
  width: 100% !important;
  height: 100% !important;
  /deep/.el-select__wrapper {
    width: 100% !important;
    height: 100% !important;
    font-size: 12px;
    line-height: 24px;
    min-height: 0px;
    padding: 0px 10px;
    box-sizing: border-box;
    background: url("@/assets/overallOverview/XIALA_1@2x.png") no-repeat center;
    background-size: 100% 100%;
    // background-color: red;
    box-shadow: 0 0 0 0px;
    /deep/.el-select__placeholder {
      color: #fff;
    }
  }
  /deep/.el-select__input {
    color: #fff;
  }
  /deep/.el-select__placeholder {
    color: #fff;
  }
}
</style>
